<template>
  <div class="u-button" :class="[`u-button--${type}`]" @click="handleClick">
    <div class="u-button-wrap">
      <u-svg v-if="icon" :icon="icon" :size="16"></u-svg>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "UButton",
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: "primary",
    },
    icon: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>
<style lang="scss" scoped>
.u-button {
  --u-btn-text: #fff;
  --u-btn-bg: var(--u-primary);
  --u-btn-bg-danger: rgba(#f53f3f, 0.6);
}
.u-button {
  display: inline-block;
  padding: 4px;
  height: 24px;
  width: 24px;
  cursor: pointer;
  background-color: var(--u-btn-bg);
  color: var(--u-btn-text);
  cursor: pointer;
  border-radius: 4px;

  &--danger {
    background: rgba(#f53f3f, 0.6);
  }

  &-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
